<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/head.css">
    <link rel="stylesheet" href="../css/foot.css">
    <link rel="stylesheet" href="../css/3.product details.css">
    <link rel="stylesheet" href="../css/slider.css">
    <script src="../lib/slider/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="../lib/jQueryMagnifier/css/magnifier.css">
    
</head>
<body>
    <!-- 头部开始 -->
    <div class="header">
        <div class="wrapper">
            <div>
                <img src="../images/logo.jpg">
                <div class="top fr">
                    欢迎光临
                    <span>乐购</span>，
                    请 &emsp;登录\
                    <span>注册</span>
                    </div>
            </div> 
        </div>        
    </div>
    <div class="wrapper t1 clearfix">
        <div class="t3 fr">
            我的订单
          </div>
        <div class="t2 fr">
            <i></i>
           <span>购物车  3</span>
        </div>
         <span class="jl1 fr"></span>
        <input type="text" value="创意文具" class="fr">
        </div>
        <div class="wrapper fenlei">
          <ul class="fr">
              <li>
                  <a href="">图书</a>
                  </li>
              <li>
                  <a href="">电子书</a>
              </li>
              <li>
                  <a href="">原创文学</a>
              </li>
              <li>
                  <a href="">服装</a>
              </li>
              <li>
                  <a href="">户外运动</a>
              </li>
              <li>
                  <a href="">孕婴装装</a>
              </li>
              <li>
                  <a href="">家具</a>
              </li>
              <li>
                  <a href="">创意文具</a>
              </li>
              <li>
                  <a href="">地方特产</a>
              </li>
              <li>
                  <a href="">海外购</a>
              </li>
              <li>
                  <a href="">电器城</a>
              </li>
          </ul>
      </div>
      <div class="clear"></div>
    </div>
    <!-- 头结束 -->
    <!-- 购物开始 -->
    <div class="shop">
        <div class="shopts wrapper">
                <p class="tsxq">图书
                    <span>>&nbsp;&nbsp;小说</span>
                    <span>>&nbsp;&nbsp;情感/家庭/婚姻</span>
                    <span>>&nbsp;&nbsp;博集天卷</span>
                    <span>>&nbsp;&nbsp;她和他</span>
                </p>
               
        </div>
    <div class="wrapper shopcat clearfix">
        <div class="magnifier shop_lfte fl" id="magnifier1">
            <div class="magnifier-container">
                <div class="images-cover"></div>
                <!--当前图片显示容器-->
                <div class="move-view"></div>
                <!--跟随鼠标移动的盒子-->
            </div>
            <div class="magnifier-assembly">
                <div class="magnifier-btn">
                    <span class="magnifier-btn-left">&lt;</span>
                    <span class="magnifier-btn-right">&gt;</span>
                </div>
                <!--按钮组-->
                <div class="magnifier-line">
                    <ul class="clearfix animation03">
                        <li>
                            <div class="small-img">
                                <img src="images/1.png" />
                            </div>
                        </li>
                        <li>
                            <div class="small-img">
                                <img src="images/2.png" />
                            </div>
                        </li>
                        <li>
                            <div class="small-img">
                                <img src="images/3.png" />
                            </div>
                        </li>
                        <li>
                            <div class="small-img">
                                <img src="images/4.png" />
                            </div>
                        </li>
                        <li>
                            <div class="small-img">
                                <img src="images/1.png" />
                            </div>
                        </li>
                    </ul>
                </div>
                <!--缩略图-->
            </div>
            <div class="magnifier-view"></div>
            <!--经过放大的图片显示容器-->
        </div>
    </body>
    <script src="../lib/jQueryMagnifier/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../lib/jQueryMagnifier/js/magnifier.js"></script>
    <script type="text/javascript">
    $(function() {
        
        var magnifierConfig = {
            magnifier : "#magnifier1",//最外层的大容器
            width : 350,//承载容器宽
            height : 422,//承载容器高
            moveWidth : null,//如果设置了移动盒子的宽度，则不计算缩放比例
            zoom : 5//缩放比例
        };
    
        var _magnifier = magnifier(magnifierConfig);
    
        /*magnifier的内置函数调用*/
        /*
            //设置magnifier函数的index属性
            _magnifier.setIndex(1);
    
            //重新载入主图,根据magnifier函数的index属性
            _magnifier.eqImg();
        */
    });
    </script>
    <div class="shop_right fr">
          <div class="shopr1">
              <p>她和他</p>
              <p>《偷影子的人》作者马克·李维重磅新作，法国连续60周年在榜，销量突破120万册</p>
              <p>[法]&nbsp;&nbsp;马克&nbsp;·&nbsp;李维&nbsp;&nbsp;著；&nbsp;&nbsp;杨亦雨&nbsp;&nbsp;译</p>
          </div>
          <div class="shopr2 clearfix">
              <p>乐购价：
                  <span class="qian1">￥26.20</span>
                  [6.9折][定价：<span style="text-decoration: line-through;">￥38.00</span>(降价通知)
              </p>
              <div class="ljpj fr">
                  <p>累计评价</p>
                  <p>99999</p>
              </div>
              <p>
                 促销信息：<span class="qian2">满减&nbsp;&nbsp;没满150.00元。&nbsp;&nbsp;可减50.00元现金</span>
                 &nbsp;&nbsp; 详情>>
              </p>
              <p>领劵：<span class="qian3"> &nbsp;&nbsp; &nbsp;&nbsp;100-6</span><span class="qian3"> &nbsp;&nbsp; &nbsp;&nbsp;100-6</span></p>

          </div>
          <ul class="shopr3 clearfix">
             <li>种类选择：</li>
             <li>平装版</li>
             <li>
                 <span class="jltz">精装版</span>
                <span class="jlt"></span></li>
          </ul>
          <div class="shopr4 clearfix ">
              <form action="" class="clearfix fl">
                  <input type="text" value="1" class="type_1 fl">
                  <input type="button" value="+" class="type_2 fr">
                  <input type="button" value="-" class="type_3">
              </form>
              <button class="fr">加入购物车</button>
          </div>
          <p class="wxts">温馨提示：&nbsp;&nbsp;支持7天无理由退货</p>
      </div>
        
    </div>
    <!-- 购物结束 -->
    <!-- 喜欢 -->
    <div class="tszk wrapper">
        <div class="tszk1">
            人气单品
        </div>
    </div>
    <div class="zkq wrapper clearfix">
        <script>
            for(let i=1;i<6;i++){
              document.write(`
                
                <div class="zkq1">
                <img src="../images/书籍/22935553-1_l.jpg" alt="">
                <img src="../images/微信图片_20210512184915.png" alt="">
                 <p class="zkq2">白夜行&emsp;东野上吾</p>
                <span class="zkq3">&nbsp;&nbsp;推荐</span>
             <img src="../images/微信图片_20210512184920.png" alt="">
            <p class="zkq4">￥：38
           <span class="zkq5">￥58</span>
           </div>
              `)
             }
        </script>
        <div class=".clear"></div>
    </div>
    <!-- 看了又看 -->
    <div class="look wrapper clearfix">
       <div class="look_lift fl">
         <h2>看了又看</h2>
           <ul>
           <script>
            for(let i=1;i<9;i++){
              document.write(`
              <li>   
                <div class="zkq1">
                <img src="../images/书籍/22935553-1_l.jpg" alt="">
                <img src="../images/微信图片_20210512184915.png" alt="">
                 <p class="zkq2">白夜行&emsp;东野上吾</p>
                <span class="zkq3">&nbsp;&nbsp;推荐</span>
             <img src="../images/微信图片_20210512184920.png" alt="">
            <p class="zkq4">￥：38
           <span class="zkq5">￥58</span>
           </div></li>
              `)
             }
        </script>
           </ul>
       </div>
     <div class="look_right fr">
           <div class="spjs">
               <span>商品介绍</span>
               <span>评价（9999）</span>
           </div>
           <div class="spjs_pj clearfix">
               <div class="fl spjs1">
                   <p>98%</p>
                   <p>好评度</p>
               </div>
               <div class="fl spjs2">
                  <p>好评(98%)
                     <span>
                         <i class="haoping"></i>
                     </span>
                     &emsp;&emsp;&emsp;&emsp;&emsp;1.洲**子 &emsp;&emsp;&emsp;&emsp;&emsp;
                     +0 &emsp;&emsp;&emsp;&emsp;&emsp;2.洲**子&emsp;&emsp; &emsp;&emsp;&emsp;+0
                  </p>
                  <p>中&nbsp; 评(2%)
                    <span>
                        <i class="zhongping"></i>
                    </span>
                    &emsp;&emsp;&emsp;&emsp;&emsp;3.洲**子 &emsp;&emsp;&emsp;&emsp;&emsp;
                    +0 &emsp;&emsp;&emsp;&emsp;&emsp;4.洲**子&emsp;&emsp; &emsp;&emsp;&emsp;+0
                 </p>
                 <p>差 &nbsp;评(0%)
                    <span></span>
                 </p>
               </div>
           </div>
           <div class="quanping"> <span>全部评价（999）</span>
            &emsp;&emsp;&emsp;好评（996） &emsp;&emsp;&emsp; 中评（4）
               &emsp;&emsp;&emsp; 差评（0）
            </div>
            <ul class="qbpl">
                <li class="clearfix">
                    <div class="fl qbpl1">
                        <img src="../images/微信图片_20210512184920.png" alt="">
                        <p>下单后5天评论</p>
                        <p>2016-08-11</p>
                    </div>
                    <p class="fl qbpl2">
                        书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关键是价格真给力
                    </p>
                    <div class="fr qbpl3">
                      <i></i>
                      <span>洲**子</span>
                      <p style="color: gold;">金牌会员</p>
                      <p>来自iPhone客户端</p>
                    </div>
                </li>
                <script>
                 for(let i=1;i<12;i++){
                   document.write(`
                   <li class="clearfix">
                    <div class="fl qbpl1">
                        <img src="../images/微信图片_20210512184920.png" alt="">
                        <p>下单后5天评论</p>
                        <p>2016-08-11</p>
                    </div>
                    <p class="fl qbpl2">
                        书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关键是价格真给力
                    </p>
                    <div class="fr qbpl3">
                      <i></i>
                      <span>洲**子</span>
                      <p style="color: gold;">金牌会员</p>
                      <p>来自iPhone客户端</p>
                    </div>
                </li>
                   `)
                  }
             </script>
            </ul>
            <div class="fanye">
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>...</li>
                    <li>下一页</li>
                </ul>
            </div>
       </div>
    </div>

    <!-- 脚页面 -->
    <div class="haibao1 wrapper"></div>
<div class="food">
    <div class="xian1"></div>
    <div class="jiao1">
        <div class="jiao2 wrapper clearfix">
          <ul class="fl">
            <li class="dp1"></li>
            <li class="dp2"></li>
            <li class="dp3"></li>
            <li class="dp4"></li>
          </ul>
        </div>
    </div>
</div>
<div class="footer wrapper ">
       <ul>
           <h2>购物指南</h2>
           <li>购物流程</li>
           <li>发票制度</li>
           <li>账户管理</li>
           <li>会员优惠</li>
       </ul>
       <ul>
        <h2>支付方式</h2>
        <li>货到付款</li>
        <li>网上支付</li>
        <li>礼品卡支付</li>
        <li>银行转账</li>
    </ul>
    <ul>
        <h2>订单服务</h2>
        <li>订单配送查询</li>
        <li>订单状态说明</li>
        <li>自助取消订单</li>
        <li>自助修改订单</li>
    </ul>
    <ul>
        <h2>退换货</h2>
        <li>退换货政策</li>
        <li>自助申请退换货</li>
        <li>退换货进度查询</li>
        <li>退款方式和时间</li>
    </ul>
    <ul>
        <h2>商家服务</h2>
        <li>商家中心</li>
        <li>运营服务</li>
        <li>加入尾品汇</li>
    </ul>
    <img class="fl" src="../images/logo_00.png" alt="">
</div>
<div class="di1">
    <ul class="clearfix wrapper">
        <li>公司简介</li>
        <li>lnvestor Relations</li>
        <li>网站联盟</li>
        <li>乐购招商</li>
        <li>机构销售</li>
        <li>手机乐购</li>
        <li>官方Blog</li>
        <li style="border: none;">热词搜索</li>
    </ul>
    <p>Copyright&nbsp;&nbsp;&nbsp;(C)&nbsp;&nbsp;&nbsp;乐购网&nbsp;&nbsp;
        2004-2016.&nbsp;&nbsp;&nbsp;
        All&nbsp;&nbsp; Reserved</p>
</div>
</body>
</html> 